<template>
  <div>
    <div class="title"><span>国内疫情地图</span></div>
    <!-- 地图容器 -->
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <van-tabs v-model="active" swipeable animated @change="change">
      <van-tab title="现存确诊">
        <div class="Ech">
          <div id="nowMain" style="width: 7.5rem; height: 6rem"></div>
        </div>
      </van-tab>
      <van-tab title="累计确诊">
        <div class="Ech">
          <div id="main" style="width: 7.5rem; height: 6rem"></div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import api from "../../../api/index";
//1.安装echarts //2.导入echarts
// import echarts from "echarts";
export default {
  data() {
    return {
      active: 0,
    };
  },
  //3.echarts实列-创建地图
  mounted() {
    api.getChinaWorldData().then((res) => {
      //验证数据是否获取到
      console.log("----1", res.data);
      //获取省份数据
      let citys = res.data.data.list;
      // console.log("国内疫情", citys);
      let arr = []; //累计
      let nowArr = []; //现存
      for (let i = 0; i < citys.length; i++) {
        //citys[i]
        let obj = {};
        obj.name = citys[i].name; //城市名字
        obj.value = citys[i].value; //累计确诊 //econNum现在确诊
        let now = {};
        now.name = citys[i].name; //城市名字
        now.value = citys[i].econNum; //现存确诊 //econNum现在确诊
        arr.push(obj);
        nowArr.push(now);
      }

      this.arr = arr;
      console.log("城市的数据", nowArr);
      //vue里面 等待延迟加载
      this.$nextTick(() => {
        //显示累计地图
        // this.$myChart.chinaMap("main", arr);
        //显示现存地图
        this.$myChart.chinaMap("nowMain", nowArr);
      });
    });
  },
  methods: {
    change(title) {
      //name,title
      // console.log("-----", title);
      if (title == 1) {
        this.$nextTick(() => {
          this.$myChart.chinaMap("main", this.arr);
        });
      }
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.title {
  padding-left: 0.2rem;
  span {
    padding-left: 10px;
    font-size: 17px;
  }
}
.Ech {
  display: flex;
  justify-content: center;
  #main,
  #nowMain {
    background: #f7f7f7;
  }
}
</style>
